<template>
	<view>
		<view v-if="playType !=='none'">
			<uni-video :playUrl="playUrl" style="width:100%; height: 200px;" v-if="playType === 'video'"></uni-video>
			<view v-else-if="playType === 'picture'">
				<image style="width:100%; height: 200px;" :src="picturePath" />
			</view>
			<view class="flex justify-between margin-bottom-xs">
				<button class="cu-btn text-white" :style="[{backgroundColor:themeConfig.primaryColor}]"
					@tap="tapSnap">{{$t('snap')}}
				</button>
				<button class="cu-btn text-white" :style="[{backgroundColor:themeConfig.primaryColor}]"
					@tap="tapPicture">{{$t('picture')}}
				</button>
				<button class="cu-btn text-white" :style="[{backgroundColor:themeConfig.primaryColor}]" @tap="tapPlay">
					<view style="width: 18px;height:18px;margin: 10px;"
						:class="playType=='video' ? 'cuIcon-stop' : 'cuIcon-playfill'" />
				</button>
				<button class="cu-btn text-white" :style="[{backgroundColor:themeConfig.primaryColor}]"
					@tap="showTool = !showTool">{{$t('tool')}}</button>
				<button class="cu-btn bg-red" @tap="close()">{{$t('close')}}
				</button>
			</view>
			<view v-if="showTool">
				<view style="margin-top:50rpx" class="text-center" v-if="actionText">{{actionText}}</view>
				<view class="flex margin-top">
					<view class="flex-sub grid col-2">
						<view>
							<view id='ptzZoomOut' class="cu-btn block margin-xs text-white" size="mini"
								:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
								{{$t('ptz')}}{{$t('zoomOut')}}
							</view>
						</view>
						<view>
							<view id='ptzZoomIn' class="cu-btn block margin-xs text-white " size="mini"
								:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
								{{$t('ptz')}}{{$t('zoomIn')}}
							</view>
						</view>
						<view>
							<view id='zoomOut' class="cu-btn block margin-xs text-white" size="mini"
								:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>{{$t('zoomOut')}}
							</view>
						</view>
						<view>
							<view id='zoomIn' class="cu-btn block margin-xs text-white " size="mini"
								:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>{{$t('zoomIn')}}
							</view>
						</view>
						<view>
							<view id='aroundHorizontal' class="cu-btn block margin-xs text-white" size="mini"
								:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
								{{$t('around')}}{{$t('horizontal')}}
							</view>
						</view>
						<view>
							<view id='aroundVertical' class="cu-btn block margin-xs text-white " size="mini"
								:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
								{{$t('around')}}{{$t('vertical')}}
							</view>
						</view>
					</view>
					<view class="flex-sub flex justify-center">
						<view style="width:240rpx;height:240rpx;border-radius:50%;"
							:style="[{backgroundColor:themeConfig.primaryColor}]">
							<view class="flex align-center justify-center" style="width:240rpx;height:80rpx;">
								<view id='ptzUp' class="cuIcon-fold text-xxl text-white" @tap='tapAction'></view>
							</view>
							<view class="flex align-center justify-between" style="width:240rpx;height:80rpx;">
								<view id='ptzLeft' class="cuIcon-back text-xxl text-center text-white"
									style="width:80rpx;height:80rpx;line-height:80rpx" @tap='tapAction'>
								</view>
								<view style="border-radius: 50%;height: 80rpx;width: 80rpx;border:1px solid #FFF">
								</view>
								<view id='ptzRight' class="cuIcon-right text-xxl text-center text-white"
									style="width:80rpx;height:80rpx;line-height:80rpx" @tap='tapAction'>
								</view>
							</view>
							<view class="flex align-center justify-center text-white"
								style="width:240rpx;height:80rpx;">
								<view id='ptzDown' class="cuIcon-unfold text-xxl text-bold" @tap='tapAction'></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view
				style="display: grid;grid-template-columns:1fr 1fr;grid-template-rows 200px 200px;grid-auto-flow : row dense;grid-column-gap: 5px">
				<view v-for="(item,index) in cameraList" :key="index"
					:style="[{backgroundImage:`url(${item.picturePath})`}]"
					class="common-box margin-bottom-lg"
					style="background-size: cover;background-position: center;position:relative;width: 100%;height: 90px;"
					@tap="tapCamera(item)">
					<view class="cuIcon-playfill"
						style="font-size:60rpx;position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);color: #FFF;">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import *
	as deviceCameraApi from '@/api/camera/cameraApi.js'
	import myConfig from '@/myConfig.js'
	import UniVideo from '@/components/ztn-custom/UniVideo/index.vue'

	export default {
		name: 'CameraList',
		data() {
			return {
				customBarHeightt: '',
				cameraId: null,
				cameraList: [],
				picturePath: '',
				playUrl: '',
				playerContext: null,
				playType: 'none',
				showTool: false,
				pushTime: 60,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		components: {
			UniVideo
		},
		onUnload() {
			this.stopVideo()
		},
		props: {
			deviceCore: {
				type: String,
				default: null
			}
		},
		watch: {
			deviceCore: {
				deep: true,
				handler() {
					this.getCameraList()
				}
			}
		},
		created() {
			this.getCameraList()
		},
		methods: {
			tapAction(e) {
				this.actionText = e.currentTarget.dataset.label
				deviceCameraApi.sendActionCommand({
					cameraId: this.cameraId,
					action: e.currentTarget.id,
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						showToast(this.$t('success'), 'none', 1000, false) //发送命令成功
					} else {
						showToast(this.$t('failure'), 'none', 1000, false)
					}
				})
				const that = this
				setTimeout(() => {
					that.actionText = null
				}, 4000);
			},
			tapCamera(item) {
				this.cameraId = item.cameraId
				this.picturePath = item.picturePath
				this.pushCloud()
			},
			pushCloud() {
				let mediaType = 'hls'
				//#ifdef MP-WEIXIN
				mediaType = 'rtmp'
				//#endif
				deviceCameraApi.pushCloud({
					mediaType: mediaType,
					cameraId: this.cameraId,
					pushTime: this.pushTime
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						const playUrl = data.playUrl
						if (playUrl) {
							this.playUrl = playUrl
							this.playType = 'video'
						} else {
							showToast(this.$t('address') + this.$t('error'), 'none', 1000,
								false)
							this.playType = 'none'
						}
					} else {
						showToast(this.$t('failure'), 'none', 1000,
							false)
						this.playType = 'none'
					}
				})
			},
			stopVideo() {
				if(!this.cameraId){
					return
				}
				deviceCameraApi.stopCloud({
					cameraId: this.cameraId,
				}).then(res => {
					const {
						data
					} = res
					if (!data) {
						showToast(this.$t('failure'), 'none', 1000,
							false)
					}
				})
			},
			close() {
				if (this.playType === 'video') {
					if (this.playerContext) {
						this.playerContext.pause()
					}
					this.stopVideo()
				}
				this.playType = 'none'
			},
			tapSnap() {
				if (this.playType === 'video') {
					if (this.playerContext) {
						this.playerContext.pause()
					}
					this.stopVideo()
				}
				this.picturePath =
					`${myConfig.app.baseUrl}/camera/snap?cameraId=${this.cameraId}&save=true&date=${new Date()}`
				this.playType = 'picture'
			},
			tapPicture() {
				if (this.playType === 'video') {
					if (this.playerContext) {
						this.playerContext.pause()
					}
					this.stopVideo()
				}
				uni.navigateTo({
					url: `/pages/cameraPicture/cameraPicture?cameraId=${this.cameraId}&hid=${this.deviceCore}`
				})
			},
			tapPlay() {
				if (this.playType === 'video') {
					if (this.playerContext) {
						this.playerContext.pause()
					}
					this.stopVideo()
				} else {
					if (this.playerContext) {
						this.playerContext.resume()
					}
					this.playType = 'video'
				}
			},
			getCameraList() {
				if (!this.deviceCore) {
					return
				}
				deviceCameraApi.getCameraList({
					deviceCore: this.deviceCore,
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						this.cameraList = data
					}
				})
			},
		}
	}
</script>
